<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>手机登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style media="screen">
        page {
            width: 100%;
            height: 100%;
            text-align: center
        }
         body{
           background-color: #fff
         }
        .content {
            display: flex;
            align-items: center;
            flex-direction: column
        }

        .login_left_img {
            position: fixed;
            left: 0pt;
            top: 11rem;
            width: 1.95rem;
            height: 6.4rem;
        }

        .login_right_img {
            position: fixed;
            right: 0pt;
            top: 3.5rem;
            width: 2.15rem;
            height: 2.7rem;
        }

        .logo {
            width: 3rem;
            height: 3rem;
        }

        input {
            height: 2.2rem;
            width: 14.05rem;
            background: #f2f2f2;
            border-radius: 1.1rem;
            text-align: left;
            padding-left: 1rem;
            font-size: .7rem;
        }

        .phone {
            margin: 3rem 0 .6rem 0;
        }

        .btn {
            height: 2.2rem;
            line-height: 2.2rem;
            width: 14.05rem;
            background: linear-gradient(to right, #FB9E68, #F15453);
            border-radius: 1.1rem;
            font-size: .7rem;
            color: #fff;
            border: none
        }

        .get-ma {
            background: #f2f2f2;
            margin: 0;
            padding: 0;
            font-size: .6rem;
            color: #F15453;
            position: absolute;
            top: .3rem;
            right: 1rem;
            z-index: 22;
            border: none;
        }
        .content-info{
          display: flex;
          flex-direction: column;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 左边装饰图 -->
        <image class='login_left_img' src='../../image/common/login_left_img.png'></image>
        <!-- 右边装饰图 -->
        <image class='login_right_img' src='../../image/common/login_right_img.png'></image>

        <div class="flex-center" style="flex-direction:column">
            <!-- logo -->
            <image class='logo' style='margin-top:2rem;border-radius:.55rem' src='../../image/index/logo1.png'></image>
            <div class="content-info">
                <input class="phone" v-model='phone' placeholder="请输入手机号" maxlength="11" />
                <div style='position:relative'>
                    <input placeholder="请输入验证码" v-model="verifyCode" maxlength="6" />
                    <button class="get-ma" tapmode @click='getVerifyCode' v-if='!verifyCodeFlag'>获取验证码</button>
                    <button class="get-ma" v-if='verifyCodeFlag'>{{second + "s"}}后可重新发送</button>
                </div>
                <input class="phone" placeholder="请输入邀请码(选填)" v-model="inviteCode" maxlength="7" style="margin-top:.6rem" />
                <button class='btn' tapmode @click='loginSubmit' style='margin-top:1rem;'>登录/注册</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    var vm = new Vue({
        el: '#app',
        data: {
            phone: '',
            verifyCode: '',
            inviteCode: '',
            second: 0,
            verifyCodeFlag: false,
            msgId: ''
        },
        methods: {
            getVerifyCode: function() {
              var that = this;
              var phone = this.phone;
                if (!phone) {
                    alert('请输入手机号')
                    return
                }
                api.ajax({
                    url: 'https://hhppapi.hoshiibuy.com/login/phone',
                    method: 'get',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    data: {
                    }
                }, function(ret, err) {
                    if (ret) {
                      api.alert({
                          msg: JSON.stringify(ret,'发送验证码成功')
                      });
                        that.msgId = ret;
                        that.verifyCodeFlag = true;
                        that.startCountdown()
                    } else {
                        api.alert({
                            msg: JSON.stringify(err,'发送验证码失败')
                        });
                    }
                });

            },

            loginSubmit: function() {
                if (!this.phone || !this.verifyCode) {
                    alert('请输入必填项')
                    return
                }
            },
            startCountdown: function() {
                let promise = new Promise((resolve, reject) => {
                    let setTimer = setInterval(() => {
                        this.second = this.second - 1;
                        if (this.second <= 0) {
                            this.second = 60;
                            this.verifyCodeFlag = false
                            resolve(setTimer)
                        }
                    }, 1000)
                })
                promise.then((setTimer) => {
                    clearInterval(setTimer)
                })
            }
        }
    })
</script>

</html>
